<template>
  <div class="back-groun">
    <div class="bac-im"> 
      <div style="width: 1200px; margin: 0 auto;">
        <div class="Interfac-l"> <span class="Interfac-im"><img src="../../img/jiekou/路径 248.png" alt=""></span> 接口专区</div>
        <div class="Inter">
 <el-button type="warning">搜索</el-button>
        </div>
        <div class="Interfa-r"><el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>

      </div>
       </div>

    <div class="back">
     <div class="butt-on" > 
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="长江流域标准数据" name="first">
      <!-- 组件1 -->
      <Zconsanguinity/>
      <!-- 组件2数据血缘 -->
      <Zdocuments/>
      <!-- 组件3数据样例 -->
       <Zonedetails/>
       <!-- 组件4接口相关文档 -->
       <Zsample/>
       
        </el-tab-pane>
       
    <el-tab-pane  label="长江流域专题数据" name="second"> <Thema/>   <Tpaging/></el-tab-pane>

  </el-tabs>
       
         <!-- <el-button @click="submit" style="width: 100%"> <span style="margin: 0 10px 0 0;"><img class="imgl" src="../../img/jiekou/06-产品数据.png" alt=""> </span> 长江流域标准数据</el-button></div>

     <div class="butt-one">  <el-button style="width: 100%;" type="primary"><span style="margin: 0 10px 0 0;">
       <img  class="imgl" src="../../img/jiekou/数据6.png" alt=""></span>  长江流域专题数据</el-button>
        -->
       </div>

  
    </div>
   
  </div>
</template>

<script>

import Thema from "./interfa/Thema.vue";
import Tpaging from "./interfa/Tpaging";
import Zconsanguinity from "./interfa/Zconsanguinity.vue"
import Zdocuments from "./interfa/Zdocuments.vue"
import Zonedetails from "./interfa/Zonedetails.vue"
import Zsample from "./interfa/Zsample.vue"

export default {
components: {
     Thema,
     Tpaging,
     Zconsanguinity,
     Zdocuments,
     Zonedetails,
     Zsample
  },
  data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }

// methods:{
//   submit () {
//     this.$router.replace('./Zonedetails.vue')
//   }
// }
}
</script>

<style less  scoped >
/* 接口专区搜索 */
.back-groun{
  width: 100%;
  
  overflow: hidden;
   background-image: linear-gradient(#D9EAFF , #FFF, #F2F8FF);  
   /* background-color: #ccc; */
}
.back{
  width: 1200px;
  height: 100%;
margin: 0 auto;
}
img{
  display: inline-block;
}
.bac-im{
  width: 100%;
  height: 100px;
  background-image: url('../../img/shouye/组 267.png');
}
.Interfac-l{
  float: left;
line-height: 100px;
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
  /* background-color: red; */
}
.Interfac-im{
  display:inline-block;
  width: 30px;
  height: 100%;
  /* background-color: rgb(73, 43, 43); */
}

.Interfa-r{
  width: 289px;
float: right;
  line-height: 100px;
  /* background-color: red; */
}
.Inter{
  width: 44px;
 float: right;
 line-height: 100px;
}
 ::v-deep .el-input__inner,.el-button--small {
 border-radius:0 ;
}

/* 接口专区搜索 */
/* 长江流域标准数据 */
/* .butt-on{
  width: 185px;
  float: left;
    text-align: center;
    line-height: 44px;
  margin: 25px 20px 0 0;
  height: 44px;
  
}
.butt-one{
  width: 185px;
  margin-top: 25px;
  float: left;
  text-align: center;
  line-height: 44px;

} */
  
/* 长江流域标准数据 */
span{
  position: relative;
}
.imgl{
  position: absolute;
  top: -1px;
  left: -12px;
}
</style>